<template>
	<view>
		<view class="top">
			<slot name="top"></slot>
		</view>
		<swiper  class="swiper" :current="current" :style="[{height: swiperHeight,background: bgColor}]"
			@change="onchange">
			<slot></slot>
		</swiper>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance,
		provide
	} from 'vue'
	const instance = getCurrentInstance();
	const emit = defineEmits(["change"])
	const props = defineProps({
		current: {
			type: Number,
			default: 0
		},
		bgColor: {
			type: String,
			default: "#fff"
		}
	})
	const swiperHeight = ref("100vh");

	const onchange = e => {
		emit("change", e.detail.current);
	}
	
	onMounted(() => {
		// const query = uni.createSelectorQuery().in(instance);
		// console.log(query)
		// query.select(".top")
		// 	.boundingClientRect(({
		// 		height
		// 	}) => {
		// 		swiperHeight.value = (uni.$u.sys().windowHeight - height) + 'px';
		// 		provide('swiperheight',swiperHeight.value);
		// 	})
		// 	.exec();
	})
</script>

<style>

</style>